<template>
  <div class="visit">
    <!-- 客户关怀页面 -->
    <!-- 书写标题头 -->
    <div class="cust_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>客户列表信息</span>
      <span @click="addVisit">新增</span>
    </div>
    <!-- 书写搜索框 -->
    <van-search
      v-model="CustValue"
      show-action
      placeholder="快递单号"
      @search="onSearch"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- 拜访列表主体 -->
    <ul>
      <li
        v-for="(item, index) in records"
        :key="index"
        @click="visitinfoGo(item.id)"
      >
        <div class="visitimg"></div>
        <div class="visitinfo">
          <p>
            <span>拜访标题</span>
            <span>{{ item.visitTitle }}</span>
          </p>
          <p>
            <span>客户名称</span>
            <span>{{ item.custName }}</span>
          </p>
          <p>
            <span>拜访时间</span>
            <span>{{ item.visitTime }}</span>
          </p>
        </div>
        <div class="visithf">定期回访</div>
      </li>
    </ul>
    <!-- 引入新增页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { GetVisitList } from "@/request/api";
export default {
  data() {
    return {
      CustValue: "",
      //   请求到的列表数据
      records: [],
    };
  },
  created() {
    GetVisitList({
      keyword: this.CustValue,
      current: 1,
      size: 5,
    }).then((res) => {
      console.log(res.data);
      this.records = res.data.records;
    });
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    onSearch() {
      console.log(sousuo);
    },
    addVisit() {
      this.$router.push("/visit/visitadd");
    },
    visitinfoGo(val) {
      this.$router.push("/visit/visitinfo?id=" + val);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.visit {
  .cust_title {
    width: 100%;
    height: 0.6rem;
    background-color: #003399;
    color: white;
    padding: 0.3rem 0.2rem 0.1rem;
    box-sizing: border-box;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
  }
  ul {
    margin-top: 0.1rem;
    li {
      padding: 0.1rem;
      background-color: white;
      display: flex;
      justify-content: space-between;
      .visitimg {
        height: 0.6rem;
        width: 0.6rem;
        background-color: wheat;
      }
      .visitinfo {
        flex: 1;
        margin-left: 0.2rem;
        line-height: 0.2rem;
        p {
          span {
            &:nth-child(1) {
              color: #aaa;
              margin-right: 0.1rem;
            }
          }
        }
      }
      .visithf {
        background-color: yellow;
        height: 0.2rem;
        color: orange;
      }
    }
  }
}
</style>